<template>
  <el-scrollbar class="avue-menu">
    <div v-if="menu&&menu.length===0&&!isHorizontal"
         class="avue-sidebar--tip">{{ $t('menuTip') }}
    </div>
    <el-menu unique-opened
             :default-active="activeMenu"
             :mode="setting.sidebar"
             :collapse="menuCollapse">
      <sidebar-item :menu="menu"></sidebar-item>
    </el-menu>
  </el-scrollbar>
</template>

<script>

import sidebarItem from "./sidebarItem.vue";
import {mapState} from "pinia";
import useCommonStore from "@/stores/useCommonStore";
import useUserStore from "@/stores/useUserStore";
import useRouterStore from "@/stores/useRouterStore";


export default {
  name: "sidebar",
  props: {
    menuCollapse: {
      type: Boolean,
      required: true,
    },
  },
  components: {sidebarItem},
  inject: ["index"],
  computed: {
    ...mapState(useCommonStore, ["isHorizontal", "setting", "isCollapse"]),
    ...mapState(useUserStore, ["menuId", "menu"]),
    ...mapState(useRouterStore, ["tag"]),
    activeMenu() {
      const route = this.$route;
      const {meta, path} = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
  },
  created() {
    this.index.openMenu()
  },

};
</script>
<style lang="scss" scoped>
</style>

